<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击改变样式</title>
    <style>
        .class_1 {
            text-align: center;
            border: 1px blue solid;
            height: 40px;
            width: 200px;
            margin: 20px auto;
            padding: 10px;
        }

        .class_2 {
            height: 50px;
            width: 50px;
            float: left;
            margin-right: 30px;
            padding-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
<script>
    onload = function () {
        // 文档加载成功，开始添加事件


        /*changeColorToInto("InnerDiv1");
                changeColorToInto("InnerDiv2");
                changeColorToInto("InnerDiv3");*/
        extracted();
        myFocus();
        myOnChange();
        myChangeColor();
    }
    function myChangeColor() {
        // TODO 改变测试div的颜色，当select更改时触发
        let elementById = document.getElementById("ExternalDiv1");
        // 获取测试div节点
        let elementsByName = document.getElementsByName("select_2")[0];
        // 通过名字获取select 节点
        let elementsByTagName = elementsByName.getElementsByTagName("option");
        elementsByTagName=elementsByName.options;
        // 获取select下的所有option标签
        // 获取指定的标签名的子集合
        for (let i = 0; i < elementsByTagName.length; i++) {

            if (elementsByTagName[i].selected){
                // 查看是否被选中，如果被选中改变颜色
                elementById.style.color=elementsByTagName[i].innerText;
            }
        }

    }
    function myFocus() {
        // TODO 在文本框中输入文本的样式
        let elementById = document.getElementById("input_1");
        // 获取input的节点
        elementById.onfocus = function () {
            //  TODO 从文本区中获取焦点的行为
            this.setAttribute("style", "background: red;");
            // 设置颜色
        }
        elementById.onblur = function () {
            // TODO 设置失去焦点的行为
            this.style.background = null;
            // 删除style的背景属性
            let value = this.value;
            // 获取文本框中的值
            value = parseInt(value);
            // 转为int
            if (isNaN(value) || value < 1 || value > 50) {
                // 合理性判断
                alert("输入的值不合理");
            } else {
                document.getElementById("ExternalDiv1").style.fontSize = value + "px";
                // 设置字体大小
            }
        }

    }
    function myOnChange() {
        // TODO 通过下拉列表控制测试div字体的颜色
        let elementsByNameElement = document.getElementsByName("select_1")[0];
        // 获取select节点
        elementsByNameElement.onchange=function(){
            // 注册一个onchange事件
            let value = this.value;
            // 获取option的值
            let elementById = document.getElementById("ExternalDiv1");
            // 获取测试div节点
            if (value!==""){
                // 如果value不是一个空字符串
                elementById.style.color=value;
                // 设置测试div的颜色
            }
        }

    }
    function extracted() {
        for (const elementsByClassNameElement of document.getElementsByClassName("class_2")) {
            // 遍历所有className=class_2的元素
            elementsByClassNameElement.onclick = function () {
                // 给元素添加事件
                // js中也可以使用this，当前对象(this指的是当前事件载体)
                let elementById = document.getElementById("ExternalDiv1");
                // 获取要更改样式的div
                elementById.setAttribute("style", this.getAttribute("style"));
                // 把当前样式赋值给目标的div
            }
        }
    }

    function changeColorToInto(idName) {
        // TODO 将传进来的idName的style给ExternalDiv1
        let elementById = document.getElementById("ExternalDiv1");
        // 获取要更改样式的div的id
        let elementById1 = document.getElementById(idName);
        // 获取样式的id
        elementById1.onclick = function () {
            // 给样式源添加点击行为
            elementById.setAttribute("style", elementById1.getAttribute("style"));
            // 把目标源的样式给目标样式
        }
    }
</script>
<div class="class_1" id="ExternalDiv1">我是一个测试div</div>
<hr>
<div style="height: 50px;width:250px;margin: 10px auto;">
    <div class="class_2" id="InnerDiv1" style="background: red;color: yellow">1</div>
    <div class="class_2" id="InnerDiv2" style="background: black;color: white">2</div>
    <div class="class_2" id="InnerDiv3" style="background: green;color: blue">3</div>
</div>
<br>
<div style="height: 50px;width:400px;margin: 10px auto;">
    <font><b>请输入要设置测试div的字体大:</b></font>
    <input id="input_1" type="text">px
</div>
<div style="height: 200px;width: 150px;margin: 10px auto;">
    <p><b>请选择字体颜色</b></p>
    <label>
        <select name="select_1">
            <option value="">请选择字体颜色</option>
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
            <option value="black">黑色</option>
            <option value="green">绿色</option>
            <option value="yellow">黄色</option>
        </select>
    </label>
</div>
<div style="height: 200px;width: 150px;margin: 10px auto;">
    <p><b>请选择字体颜色</b></p>
    <label>
        <select name="select_2" onchange="myChangeColor()">
            <option>#66ccff</option>
            <option>#ff0000</option>
            <option>#00ff00</option>
            <option>#0000ff </option>
            <option>#ffff00</option>

        </select>
    </label>
</div>
</body>
</html>